<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>2021春节</title>

    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
            background: #222;
            font-family: 'Karla', sans-serif;
            color: #FFF;
            height: 100%;
            overflow: hidden;
        }

        h1 {
            z-index: 1000;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            font-size: 58px;
            border: 2px solid #FFF;
            padding: 7.5px 15px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 3px;
            overflow: hidden;
            text-align: center;
        }

        span {
            position: relative;
            display: inline-block;
            animation: drop 0.75s;
        }

        canvas {
            width: 100%;
            height: 100%;
        }

        @keyframes drop {
            0% {
                transform: translateY(-100px);
                opacity: 0;
            }

            90% {
                opacity: 1;
                transform: translateY(10px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .layer {
            width: 100%;
            /*设置元素宽度*/
            height: 20%;
            /*设置元素高度*/
            position: absolute;
            font-size: 100px;
            /*设置字体大小*/
            white-space: pre;
            /*设置元素内的空白*/
            text-align: center;
            /*设置文字居中*/
            top: 50px;
            color: #9966FF;
            /*设置文字颜色*/
            letter-spacing: -2px;
            /*设置字符间距*/
            text-shadow: 4px 0 2px;
            /*设置文字阴影*/
            -webkit-transform-style: preserve-3d;
            /*设置元素保留3D位置*/
            -webkit-animation: a1 3s infinite alternate ease-in-out;
            /*设置动画*/
            -webkit-animation-fill-mode: forwards;
        }

        @keyframes a1 {

            /*创建动画*/
            0% {
                -webkit-transform: rotateX(20deg) rotateY(40deg);
            }

            50% {
                -webkit-transform: rotateX(0) rotateY(0);
            }

            100% {
                -webkit-transform: rotateX(-20deg) rotateY(-40deg);
            }
        }

        .box {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;

        }

        .shine {
            width: 100%;
            text-align: center;
            position: absolute;
            top: 30%;
            font-size: 5em;
            /*设置字体大小*/
            font-weight: bolder;
            /*设置字体粗细*/
            color: #FFFFFF;
            /*设置文字颜色*/
            cursor: pointer;
            /*设置光标形状*/
            -webkit-animation: light 1.5s ease-in-out infinite alternate;
            /*设置动画*/
        }

        @-webkit-keyframes light {

            /*创建动画*/
            from {
                text-shadow: 0 0 10px #fff,
                    0 0 20px #fff,
                    0 0 30px #fff,
                    0 0 40px #0000FF,
                    0 0 70px #0000FF,
                    0 0 80px #0000FF,
                    0 0 100px #0000FF,
                    0 0 150px #0000FF;
            }

            to {
                text-shadow: 0 0 5px #fff,
                    0 0 10px #fff,
                    0 0 15px #fff,
                    0 0 20px #0000FF,
                    0 0 35px #0000FF,
                    0 0 40px #0000FF,
                    0 0 50px #0000FF,
                    0 0 75px #0000FF;
            }

        }

        .threeD {
            width: 100%;
            position: absolute;
            top: 15%;
            text-align: center;
            font-size: 100px;
            /*设置字体大小*/
            font-weight: 800;
            /*设置字体粗细*/
            text-shadow: 1px 0px #009916, 1px 2px #006615, 3px 1px #009916,
                2px 3px #006615, 4px 2px #009916, 4px 4px #006615,
                5px 3px #009916, 5px 5px #006615, 7px 4px #009916,
                6px 6px #006615, 8px 5px #009916, 7px 7px #006615,
                9px 6px #009916, 9px 8px #006615, 11px 7px #009916
                /*设置文字阴影*/
        }
    </style>
</head>

<body>
    <audio id="audio" controls="controls" loop="loop" preload="auto" autoplay
        src="http://m10.music.126.net/20231025193132/098831c5c1f0690d5b1b4eaa209808f4/ymusic/df71/067c/8d38/cb9a2b440d6ca21cce34fb0f24f49e98.mp3">
    </audio>
    <script>
    </script>
    <canvas></canvas>
    <div class="stage">
        <div class="layer">热烈祝贺张益畅</div>
    </div>
    <div class="threeD">获得国际魅力金奖</div>
    <div class="box">
        <a class="shine">是金子总会发光</a>
    </div>
    <h1>
        张益畅真美丽!!
        <span>（就是就是~）</span>
        <span>（没错没错~）</span>
    </h1>


    <script type="text/javascript">
        var ctx = document.querySelector('canvas').getContext('2d')
        ctx.canvas.width = window.innerWidth
        ctx.canvas.height = window.innerHeight

        var sparks = []
        var fireworks = []
        var i = 20; while (i--) {
            fireworks.push(
                new Firework(Math.random() * window.innerWidth, window.innerHeight * Math.random())
            )
        }

        render()
        function render() {
            setTimeout(render, 1000 / 60)
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
            for (var firework of fireworks) {
                if (firework.dead) continue
                firework.move()
                firework.draw()
            }
            for (var spark of sparks) {
                if (spark.dead) continue
                spark.move()
                spark.draw()
            }

            if (Math.random() < 0.05) {
                fireworks.push(new Firework())
            }
        }

        function Spark(x, y, color) {
            this.x = x
            this.y = y
            this.dir = Math.random() * (Math.PI * 2)
            this.dead = false
            this.color = color
            this.speed = Math.random() * 3 + 3;
            this.walker = new Walker({ radius: 20, speed: 0.25 })
            this.gravity = 0.25
            this.dur = this.speed / 0.1
            this.move = function () {
                this.dur--
                if (this.dur < 0) this.dead = true

                if (this.speed < 0) return
                if (this.speed > 0) this.speed -= 0.1
                var walk = this.walker.step()
                this.x += Math.cos(this.dir + walk) * this.speed
                this.y += Math.sin(this.dir + walk) * this.speed
                this.y += this.gravity
                this.gravity += 0.05

            }
            this.draw = function () {
                drawCircle(this.x, this.y, 3, this.color)
            }
        }

        function Firework(x, y) {
            this.xmove = new Walker({ radius: 10, speed: 0.5 })
            this.x = x || Math.random() * ctx.canvas.width
            this.y = y || ctx.canvas.height
            this.height = Math.random() * ctx.canvas.height / 2
            this.dead = false
            this.color = randomColor()

            this.move = function () {
                this.x += this.xmove.step()
                if (this.y > this.height) this.y -= 1;
                else this.burst()

            }
            this.draw = function () {
                drawCircle(this.x, this.y, 1, this.color)
            }
            this.burst = function () {
                this.dead = true
                var i = 100; while (i--) sparks.push(new Spark(this.x, this.y, this.color))
            }
        }

        function drawCircle(x, y, radius, color) {
            color = color || '#FFF'
            ctx.fillStyle = color
            ctx.fillRect(x - radius / 2, y - radius / 2, radius, radius)
        }

        function randomColor() {
            return ['#6ae5ab', '#88e3b2', '#36b89b', '#7bd7ec', '#66cbe1'][Math.floor(Math.random() * 5)];
        }

        function Walker(options) {
            this.step = function () {
                this.direction = Math.sign(this.target) * this.speed
                this.value += this.direction
                this.target
                    ? this.target -= this.direction
                    : (this.value)
                        ? (this.wander)
                            ? this.target = this.newTarget()
                            : this.target = -this.value
                        : this.target = this.newTarget()
                return this.direction
            }

            this.newTarget = function () {
                return Math.round(Math.random() * (this.radius * 2) - this.radius)
            }

            this.start = 0
            this.value = 0
            this.radius = options.radius
            this.target = this.newTarget()
            this.direction = Math.sign(this.target)
            this.wander = options.wander
            this.speed = options.speed || 1
        }
    </script>

    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

    </div>
</body>

</html>